<template>
  <div class="comment">
    <template v-if="comment">
      <div class="user-avatar"><img :src="comment.user.avatar" alt=""></div>
      <div class="content">
        <p class="nickname">{{ comment.user.nickname }}</p>
        <ul class="comment-action">
          <li class="like" :class="comment.likeDone ? 'highlight' : ''" @click="toggleLike">{{ comment.likeCount }}</li>
          <li @click="postNewCommentReply">回复</li>
          <li @click="onReportComment">{{ getReportText(comment.reportActionStatus) }}</li>
          <li v-if="comment.canDelete" @click="onDeleteComment">删除</li>
        </ul>
        <p class="text">{{ comment.text }}</p>
        <div class="new-reply" v-if="newCommentReply && newCommentReply.show">
          <post-comment
            :show="newCommentReply.show"
            :textarea="newCommentReply.textarea"
            :btn="newCommentReply.btn"
            :content="newCommentReply.content"
            @post-comment="submitNewCommentReply"></post-comment>
        </div>
        <div class="replies" v-if="replies && replies.length">
          <ul>
            <li class="reply-item" v-for="(reply, index) in replies" :key="index" v-if="canShowReply(index)">
              <p v-if="reply.replyTo">{{ reply.user.nickname }} 回复 @{{ reply.replyTo.user.nickname }}</p>
              <p v-else>{{ reply.user.nickname }}</p>
              <p class="reply-text">{{ reply.text }}</p>
              <div class="reply-action">
                <!--<p @click="postNewReply(reply)">回复</p>-->
                <p @click="onReportReply(reply)">{{ getReportText(reply.reportActionStatus) }}</p>
                <p v-if="reply.canDelete" @click="onDeleteReply(comment, reply)">删除</p>
              </div>
              <div class="new-reply" v-if="newReplies && newReplies[reply.id] && newReplies[reply.id].show">
                <post-comment
                  :show="newReplies[reply.id].show"
                  :textarea="newReplies[reply.id].textarea"
                  :btn="newReplies[reply.id].btn"
                  :content="newReplies[reply.id].content"
                  :id="reply.id"
                  @post-comment="submitReply"></post-comment>
              </div>
            </li>
            <li class="reply-switch reply-item" v-if="canExpand">
              <span @click="expandReply">点击查看全部</span>
            </li>
          </ul>
        </div>
      </div>
      <el-dialog title="举报" :visible.sync="showReportOption" center width="300px">
        <el-form :model="reportForm" label-position="top">
          <el-form-item label="请选择举报项：">
            <el-radio-group v-model="reportForm.option">
              <div v-for="(option, index) in reportOptions" :key="index">
                <el-radio :label="option.label"></el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他：">
            <el-input type="textarea" v-model="reportForm.text"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitReport" :loading="submitReportBtn.loading">提交举报</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<style scoped>
  .comment {
    position: relative;
  }
  .user-avatar {
    position: absolute;
    left: 16px;
    top: 16px;
  }
  .user-avatar img{
    width: 42px;
    height: 42px;
    vertical-align: top;
    border-radius: 50%;
  }
  .content {
    padding-top: 20px;
    padding-left: 80px;
    position: relative;
  }
  .nickname {
    color: #000;
    font-size: 16px;
    font-weight: bold;
  }
  .comment-action {
    position: absolute;
    right: 0;
    top: 20px;
  }
  .comment-action li {
    cursor: pointer;
    float: left;
    color: #787878;
    font-size: 14px;
    margin-left: 34px;
  }
  .comment-action li.like {
    padding-left: 26px;
    background-image:url(./imgs/like-gray.png);
    background-repeat:no-repeat;
    background-size:55% 90%;
    -moz-background-size:55% 90%;
    /*background: url(./imgs/like-gray.png) no-repeat left center;*/
  }
  .comment-action li.like.highlight {
    background-image: url(./imgs/like-highlight.png);
    padding-left: 26px;
    /*background-image:url(./imgs/like-gray.png);*/
    background-repeat:no-repeat;
    background-size:55% 90%;
    -moz-background-size:55% 90%;
  }
  .comment-action li:first-child {
    margin-left: 0;
  }
  .text {
    clear: both;
    margin-top: 14px;
    color: #000;
    font-size: 14px;
  }
  .new-reply {
    margin-top: 15px;
  }
  .replies {
    position: relative;
    margin-top: 20px;
    width: 100%;
  }
  .replies::before {
    content: '';
    position: absolute;
    display: block;
    border-width: 12px 10px;
    border-style: solid;
    border-color: transparent transparent #d7d7d7;
    top: -24px;
    left: 25px;
  }
  .replies > ul {
    border-radius: 5px;
    background: #d7d7d7;
  }
  .reply-item {
    position: relative;
    padding: 16px;
    border-bottom: 1px solid #ccc;
  }
  .reply-item:last-child {
    border-bottom: 0;
  }
  .reply-text {
    margin-top: 2px;
  }
  .reply-item:hover .reply-action {
    display: block;
  }
  .reply-action {
    display: none;
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .reply-action p{
    cursor: pointer;
    float: left;
    margin-left: 15px;
  }
  .reply-action p:first-child{
    margin-left: 0;
  }
  .reply-switch {
    text-align: center;
  }
  .reply-switch span{
    cursor: pointer;
  }
</style>

<script>
import postComment from '../post-comment/index';

let STATUS = {
  notStart: '',
  doing: 'doing',
  done: 'done',
  fail: 'fail'
};

export default {
  name: 'comment',
  components: { postComment },
  props: {
    comment: {
      type: Object,
      default: () => {
        return null;
      }
    },
    replies: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      isExpand: false,
      newCommentReply: null,
      newReplies: null,
      isNeedExpand: this.replies.length > 5,
      reportOptions: [
        {
          value: 0,
          label: '垃圾营销'
        },
        {
          value: 1,
          label: '不实信息'
        },
        {
          value: 2,
          label: '有害信息'
        },
        {
          value: 3,
          label: '违法信息'
        },
        {
          value: 4,
          label: '淫秽色情'
        },
        {
          value: 5,
          label: '人身攻击我'
        },
        {
          value: 6,
          label: '抄袭我的内容'
        },
        {
          value: 7,
          label: '违规有奖活动'
        }
      ],
      showReportOption: false,
      reportForm: {
        option: '',
        text: ''
      },
      reportObj: null,
      reportType: '',
      submitReportBtn: {
        loading: false
      }
    };
  },
  computed: {
    canExpand() {
      if (this.isExpand || !this.isNeedExpand) {
        this.isExpand = true;
        return false;
      } else if (this.replies.length <= 5) {
        this.isExpand = true;
        return false;
      }
      return true;
    }
  },
  watch: {
    'comment.postActionStatus'(newStatus, oldStatus) {
      if (newStatus === STATUS.done && oldStatus !== STATUS.done) {
        this.postCommentReplyActionDone();
      }
    },
    'comment.reportActionStatus'(newStatus, oldStatus) {
      if (newStatus === STATUS.done) {
        this.reportActionDone();
      }
    },
    replies: {
      handler: function(newReplies) {
        if (!Array.isArray(newReplies)) {
          return;
        }
        for (let newReply of newReplies) {
          if (newReply.reportActionStatus === STATUS.done && this.reportType === 'reply' && this.reportObj && this.reportObj.id === newReply.id) {
            this.reportActionDone(newReply);
          }
          if (this.newReplies && this.newReplies.hasOwnProperty(newReply.id)) {
            if (newReply.postActionStatus === STATUS.done && this.newReplies[newReply.id].postActionStatus !== STATUS.done) {
              this.postReplyReplyActionDone(newReply);
            }
          }
        }
      },
      deep: true
    }
  },
  methods: {
    userIsLogin() {
      if (!this.$_isLogin) {
        this.$_jumpToLogin({
          viewName: this.$route.name,
          query: this.$route.query || ''
        });
        return false;
      }
      return true;
    },
    toggleLike() {
      if (!this.userIsLogin()) {
        return;
      }
      if (this.comment.likeActionStatus === STATUS.doing) {
        return;
      }
      this.$emit('like', this.comment, !this.comment.likeDone);
    },
    getReportText(status) {
      if (status === STATUS.done) {
        return '已举报';
      } else {
        return '举报';
      }
    },
    submitReport() {
      if (this.submitReportBtn.loading) {
        return;
      }
      let reportArg = null;
      if (!this.reportForm.option) {
        this.$message({
          type: 'warning',
          message: '请选择举报项'
        });
      } else {
        let value = -1;
        for (let item of this.reportOptions) {
          if (item.label === this.reportForm.option) {
            value = item.value;
            break;
          }
        }
        if (value === -1) {
          return this.$message({
            type: 'warning',
            message: '请选择正确的举报项'
          });
        }
        reportArg = {label: this.reportForm.option, value: value, text: this.reportForm.text};
        this.submitReportBtn.loading = true;
        this.$emit('report-' + this.reportType, this.reportObj, reportArg);
      }
    },
    reportActionDone() {
      this.reportForm = {option: '', text: ''};
      this.reportType = '';
      this.reportObj = null;
      this.submitReportBtn.loading = false;
      this.showReportOption = false;
    },
    onReportComment() {
      if (!this.userIsLogin()) {
        return;
      }
      if (this.comment.reportActionStatus === STATUS.notStart || this.comment.reportActionStatus === STATUS.fail) {
        this.showReportOption = true;
        this.reportObj = this.comment;
        this.reportType = 'comment';
      } else if (this.comment.reportActionStatus === STATUS.done) {
        this.$message({
          type: 'warning',
          message: '您已成功举报该内容'
        });
      }
    },
    onDeleteComment() {
      if (!this.userIsLogin()) {
        return;
      }
      if (this.comment.deleteActionStatus === STATUS.doing) {
        return;
      }
      this.$confirm('确定删除该评论？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
          if (action === 'confirm') {
            this.$emit('delete-comment', this.comment);
          }
        }
      });
    },
    submitNewCommentReply(reply) {
      if (this.comment.postActionStatus === STATUS.doing) {
        return;
      }
      this.newCommentReply.content = reply;
      this.newCommentReply.btn.loading = true;
      this.$emit('post-comment-reply', this.comment, reply);
    },
    postCommentReplyActionDone() {
      let update = () => {
        this.newCommentReply.content = '';
        this.newCommentReply.show = false;
        this.newCommentReply.btn.loading = false;
      };
      this.$nextTick().then(update);
    },
    postNewCommentReply() {
      if (!this.userIsLogin()) {
        return;
      }
      if (this.newCommentReply) {
        if (!this.newCommentReply.btn.loading) {
          this.newCommentReply.show = !this.newCommentReply.show;
        }
      } else {
        this.newCommentReply = {
          show: true,
          textarea: {
            placeholder: '回复 ' + this.comment.user.nickname + ':',
            autosize: {minRows: 2, maxRows: 5},
            type: 'textarea'
          },
          btn: {
            type: 'primary',
            loading: false,
            text: '回复'
          },
          content: ''
        };
      }
    },
    canShowReply(index) {
      if (index < 5) {
        return true;
      }
      return !this.canExpand;
    },
    expandReply() {
      this.isExpand = true;
    },
    onReportReply(reply) {
      if (!this.userIsLogin()) {
        return;
      }
      if (reply.reportActionStatus === STATUS.notStart || reply.reportActionStatus === STATUS.fail) {
        this.showReportOption = true;
        this.reportObj = reply;
        this.reportType = 'reply';
      } else if (reply.reportActionStatus === STATUS.done) {
        this.$message({
          type: 'warning',
          message: '您已成功举报该内容'
        });
      }
    },
    onDeleteReply(comment, reply) {
      if (!this.userIsLogin()) {
        return;
      }
      if (reply.deleteActionStatus === STATUS.notStart || reply.deleteActionStatus === STATUS.fail) {
        this.$confirm('确定删除该回复？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: (action) => {
            if (action === 'confirm') {
              this.$emit('delete-reply', comment, reply);
            }
          }
        });
      } else if (reply.deleteActionStatus === STATUS.done) {
        this.$message({
          type: 'warning',
          message: '您已成功删除该内容'
        });
      }
    },
    getReplyById(id) {
      for (let item of this.replies) {
        if (item.id === id) {
          return item;
        }
      }
      return null;
    },
    submitReply(content, id) {
      let reply = this.getReplyById(id);
      if (!reply) {
        this.$message({
          type: 'warning',
          message: '没有找到您要回复的对象'
        });
        return;
      }
      if (reply.postActionStatus === STATUS.doing) {
        return;
      }
      this.newReplies[reply.id].content = content;
      this.newReplies[reply.id].btn.loading = true;
      this.newReplies[reply.id].postActionStatus = STATUS.doing;
      this.$emit('post-reply-reply', this.comment, reply, content);
    },
    postReplyReplyActionDone(reply) {
      let update = () => {
        this.newReplies[reply.id].show = false;
        this.newReplies[reply.id].content = '';
        this.newReplies[reply.id].btn.loading = false;
        this.newReplies[reply.id].postActionStatus = STATUS.done;
      };
      this.$nextTick().then(update);
    },
    postNewReply(reply) {
      if (!this.userIsLogin()) {
        return;
      }
      if (!this.newReplies) {
        this.newReplies = {};
      }
      if (this.newReplies.hasOwnProperty(reply.id)) {
        if (!this.newReplies[reply.id].btn.loading) {
          if (this.newReplies[reply.id].postActionStatus === STATUS.done) {
            this.newReplies[reply.id].postActionStatus = STATUS.notStart;
          }
          this.newReplies[reply.id].show = !this.newReplies[reply.id].show;
        }
      } else {
        this.$set(this.newReplies, reply.id, {
          show: true,
          textarea: {
            placeholder: '回复' + reply.user.nickname,
            autosize: {minRows: 2, maxRows: 5},
            type: 'textarea'
          },
          btn: {
            type: 'primary',
            loading: false,
            text: '回复'
          },
          content: '',
          status: ''
        });
      }
    }
  }
};
</script>


